<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span><div ref="chartRef" style="width: 100%; height: 400px;"></div></span>
    </div>
    <!--    <div ref="chartRef" style="width: 100%; height: 400px;"></div>-->
  </el-card>


</template>

<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import * as echarts from 'echarts';
import {getQuestionRank} from "@/api/question.js";

const chartRef = ref(null);
let chartInstance = null;

onMounted(async () => {

  //发起请求 获取题目排行榜
  const result = await getQuestionRank();
  console.log(result.data.data)
  //

  // 初始化图表
  chartInstance = echarts.init(chartRef.value);
  // 设置图表选项
  const options = {
    title: {
      text: '题目热度排行榜单',
      subtext: 'Topic popularity list',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '提交数',
        type: 'pie',
        radius: '50%',
        data: result.data.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  // 使用配置项显示图表
  chartInstance.setOption(options);
});

onUnmounted(() => {
  // 销毁图表实例
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
/* 你的样式 */
.box-card {
  margin-bottom: 20px;
}
</style>
